<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <title>GeoTree+OpenStreetMap Demo</title>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <link href="/css/main.css" type="text/css" rel="stylesheet" />
    <script type="text/javascript" src= "http://www.google.com/jsapi"> </script> 
    <script type="text/javascript"> google.load("jquery", "1.3.2"); </script> 
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
    <script type="text/javascript" src="/js/google-maps-v3-samples.js"></script>
    <script type="text/javascript" src="/js/map.js"></script>
</head>

<body id="index" class="home" onload="initialize_map()">

    <div id="top_bar">
        <div id="header" class="container">
            <h1 class="main-title">GeoTree+OpenStreetMap Demo</h1>
        </div>
    </div>

    <div id="content" class="container">
        
        <div id="map_container"> 
            <div id="map_canvas"></div> 
        </div> 

        <div id="sidebar">

            <div id="geocode_container">
                <input type='text' onkeypress='geocodeOnEnter(event)' id='city-field' value='' title='City/Address'/> 
                <div class="input-buttons"> 
                    <input type='button' value='Go' onclick='geocodeCity()'/> 
                </div> 
            </div>

            <div id="marker_info"> 
            </div> 

            <div id="attr_container"> 
            </div> 

            <div id="update_info"> 
            </div> 

        </div>

        <div id="description">
            <p>
            Here, places are loaded from <a href="http://osm.org">OpenStreetMap</a> (OSM). Requests are made to OSM API. The data is parsed for nodes and closed ways. The data is loaded at every zoom end for 3x3 square of tiles around a center point. Tiles for loading are considered at zoom 17. No requests to API are made if a center tile was loaded before. POIs are given initial importances. Importances may be increased or decreased. When a point is clicked its attributes and tags are shown on side bar. Use input field above to zoom to a city or an address.
            </p>
            <p>
            Initial importances: 1 - node without name, 2 - closed way without name, 3 - node with a name tag, 4 - closed way with a name tag.
            </p>
        </div>

    </div> <!-- content -->

    <script type="text/javascript"> 
        $(document).ready(function(){
             $("#update_osm_button").attr("disabled","disabled");
        });
    </script> 

</body>
</html>
